<template>
  <div class="main">
    <!-- 搜索 -->
    <div class="serbox">
      <div class="inp">
        <div>
          <el-input placeholder="请输入搜索内容" v-model="searchText">
          </el-input>
        </div>
        <el-button
          type="primary"
          style="margin-left: 15px"
          size="medium"
          @click="search"
          >查询</el-button
        >
      </div>
      <el-button type="primary" @click="openPop(1)">添加类型</el-button>
    </div>
    <!-- 表单 -->
    <div class="table">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column type="index" label="序号" width="70">
        </el-table-column>
        <el-table-column prop="name" label="类型名称"> </el-table-column>
        <el-table-column prop="hasSpecText" label="使用规格"> </el-table-column>
        <el-table-column prop="hasParamText" label="使用参数">
        </el-table-column>
        <el-table-column prop="gmtCreate" label="创建时间"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              @click="chodel(scope.row)"
              type="text"
              style="color: red"
              size="small"
              >删除</el-button
            >
            <el-button
              @click="openPop(scope.row, 0)"
              type="text"
              style="color: #606266"
              size="small"
              >详情</el-button
            >
            <el-button
              @click="openPop(scope.row, 1)"
              type="text"
              style="color: #606266"
              size="small"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="page">
      <div class="btns">
        <!-- <el-button type="primary">批量删除</el-button> -->
      </div>
      <el-pagination
        background
        @current-change="changePage"
        :current-page.sync="page"
        :page-size="pageSize"
        layout="total,prev,pager,next,jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 弹框 -->
    <el-dialog title="商品类型" :visible.sync="outerPop">
      <div class="popOuter">
        <div class="navBar">
          <span :class="popbar == 0 ? 'span-act' : ''" @click="popbar = 0"
            >基本设置</span
          >
          <span :class="popbar == 1 ? 'span-act' : ''" @click="popbar = 1"
            >规格设置</span
          >
          <span :class="popbar == 2 ? 'span-act' : ''" @click="popbar = 2"
            >参数设置</span
          >
        </div>
        <div class="cont cont1" v-if="popbar == 0">
          <span class="label">类型名称：</span>
          <el-input
            style="width: 280px"
            v-model="typeInfo.name"
            placeholder="请输入类型名称"
            :disabled="!isedit"
          ></el-input>
        </div>
        <div class="cont cont2" v-if="popbar == 1">
          <el-button type="primary" size="mini" v-if="isedit" @click="addSpec"
            >添加规格</el-button
          >
          <div class="choed">
            <span>已选：</span>
            <p class="el" v-if="typeInfo.typeSpecList.length <= 0">无</p>
            <p
              class="el"
              v-for="(item, index) in typeInfo.typeSpecList"
              :key="index"
            >
              {{ item.spec.name }}：
              <span
                class="span"
                v-for="(it, idx) in item.specValList"
                :key="idx"
                >{{ it.specValText }}</span
              >
              <span class="span delspan" v-if="isedit" @click="delspec(index)"
                >删除</span
              >
            </p>
          </div>
        </div>
        <div class="cont cont3" v-if="popbar == 2">
          <el-button type="primary" size="mini" v-if="isedit" @click="addpardet"
            >添加参数组</el-button
          >
          <div
            class="parambox"
            v-for="(item, index) in typeInfo.typeParamsList"
            :key="index"
          >
            <el-input
              style="width: 350px"
              placeholder="请输入详细参数"
              v-model="item.name"
              :disabled="!isedit"
            ></el-input>
            <span class="del" v-if="isedit" @click="delpardet(index)"
              >删除</span
            >
          </div>
          <div
            style="margin-top: 20px"
            v-if="typeInfo.typeParamsList.length <= 0"
          >
            暂未添加
          </div>
        </div>
        <el-button
          type="primary"
          style="margin-top: 50px"
          v-if="isedit"
          @click="submit"
          >确 定</el-button
        >
      </div>
      <!-- 内弹框 -->
      <el-dialog
        title="添加规格"
        :visible.sync="innerPop"
        width="40%"
        append-to-body
      >
        <div class="speclist">
          <span
            class="name"
            v-for="(item, index) in speclist"
            :key="index"
            :class="index == chospecIndex ? 'name-act' : ''"
            @click="chospec(index)"
            >{{ item.name }}</span
          >
          <div class="specR">
            <span>规格值：</span>
            <el-checkbox-group v-model="checkList">
              <el-checkbox
                v-for="(item, index) in specvalue"
                :key="index"
                :label="item.specValue"
                >{{ item.specValue }}</el-checkbox
              >
            </el-checkbox-group>
          </div>
        </div>
        <el-button type="primary" style="margin-top: 50px" @click="specSubmit"
          >确 定</el-button
        >
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchText: "",
      tableData: [], // 表单列表
      total: 0,
      page: 1,
      pageSize: 10,
      outerPop: false,
      innerPop: false, // 内置弹框
      popbar: 1, // 设置0 规格1 参数2
      choIndex: 0, // 选择类型管理的index
      isAdd: true,
      isedit: true,
      typeInfo: {
        // 弹框信息(类型详情)
        name: "", // 名称
        typeSpecList: [
          {
            spec: { name: "", id: "" },
            specValList: [{ specValText: "" }],
          },
        ],
        typeParamsList: [{ name: "", id: "" }], // 参数
      },
      checkList: [],
      speclist: [], // 规格名称列表
      chospecIndex: 0, // 选中规格名称的下标
      specvalue: [], // 规格值
    };
  },
  mounted() {
    this.getTypeList();
  },
  methods: {
    // 获取类型列表
    getTypeList() {
      this.$postRequest("/mall/goodsType/list", {
        shopId: sessionStorage.getItem("shopId"),
        name: this.searchText,
        pageNum: this.page,
        pageSize: this.pageSize,
      }).then((res) => {
        this.total = res.total;
        for (var i = 0; i < res.rows.length; i++) {
          if (res.rows[i].hasSpec == 0) {
            res.rows[i].hasSpecText = "未使用";
          } else if (res.rows[i].hasSpec == 1) {
            res.rows[i].hasSpecText = "已使用";
          }
          if (res.rows[i].hasParam == 0) {
            res.rows[i].hasParamText = "未使用";
          } else if (res.rows[i].hasParam == 1) {
            res.rows[i].hasParamText = "已使用";
          }
        }
        this.tableData = res.rows;
      });
    },
    // 打开弹框
    openPop(e, type) {
      this.outerPop = true;
      this.popbar = 0;
      if (e == 1) {
        this.isAdd = true;
        this.isedit = true;
        this.clearDate();
      } else {
        this.isAdd = false;
        if (type == 0) {
          // 详情
          this.isedit = false;
        } else if (type == 1) {
          // 编辑
          this.isedit = true;
        }
        // 获取详情信息
        this.getTypeInfo(e.id);
      }
    },
    // 获取类型详情信息
    getTypeInfo(id) {
      this.$getRequest("/mall/goodsType/" + id, {}).then((res) => {
        this.typeInfo = res.data;
      });
    },
    // 删除商品类型
    chodel(e) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 请求
          this.$postRequest("/mall/goodsType/remove", {
            id: e.id,
          }).then((res) => {
            this.$message.success("删除成功");
            this.getTypeList();
          });
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },
    // 弹框提交
    submit() {
      // 判断参数值是否有空缺
      var isnull = true;
      for (var i = 0; i < this.typeInfo.typeParamsList.length; i++) {
        if (this.typeInfo.typeParamsList[i].name == "") {
          isnull = false;
          break;
        }
      }
      if (this.typeInfo.name == "") {
        this.$message.error("请在基本设置中输入类型名称");
      } else if (!isnull) {
        this.$message.error("请在参数设置中将参数补充完整");
      } else {
        if (this.isAdd) {
          this.addType();
        } else {
          this.editType();
        }
      }
    },
    // 新增类型
    addType() {
      // 处理参数格式
      var paramsArr = [];
      for (var i = 0; i < this.typeInfo.typeParamsList.length; i++) {
        var obj = {};
        obj.name = this.typeInfo.typeParamsList[i].name;
        paramsArr.push(obj);
      }
      // 处理规格格式
      var specArr = [];
      for (var i = 0; i < this.typeInfo.typeSpecList.length; i++) {
        var obj = {};
        obj.specId = this.typeInfo.typeSpecList[i].spec.id;
        obj.specValList = this.typeInfo.typeSpecList[i].specValList;
        specArr.push(obj);
      }
      // 请求
      this.$postRequest("/mall/goodsType/add", {
        shopId: sessionStorage.getItem("shopId"),
        name: this.typeInfo.name,
        hasSpec: specArr.length > 0 ? 1 : 0,
        hasParam: paramsArr.length > 0 ? 1 : 0,
        typeParamsList: paramsArr,
        typeSpecList: specArr,
      }).then((res) => {
        this.$message.success("添加成功");
        this.outerPop = false;
        this.getTypeList();
      });
    },
    // 修改类型
    editType() {
      // 处理参数数据格式
      var paramsArr = [];
      for (var i = 0; i < this.typeInfo.typeParamsList.length; i++) {
        var obj = {
          id: this.typeInfo.typeParamsList[i].id,
          name: this.typeInfo.typeParamsList[i].name,
        };
        paramsArr.push(obj);
      }
      // 处理规格数据格式
      var specArr = [];
      for (var i = 0; i < this.typeInfo.typeSpecList.length; i++) {
        var obj = {
          id: this.typeInfo.typeSpecList[i].id,
          specId: this.typeInfo.typeSpecList[i].specId,
          specValList: [],
        };
        for (
          var j = 0;
          j < this.typeInfo.typeSpecList[i].specValList.length;
          j++
        ) {
          var smobj = {
            id: this.typeInfo.typeSpecList[i].specValList[j].id,
            specValText:
              this.typeInfo.typeSpecList[i].specValList[j].specValText,
          };
          obj.specValList.push(smobj);
        }
        specArr.push(obj);
      }
      // 请求
      this.$postRequest("/mall/goodsType/edit", {
        shopId: sessionStorage.getItem("shopId"),
        id: this.typeInfo.id,
        name: this.typeInfo.name,
        hasSpec: this.typeInfo.typeSpecList.length > 0 ? 1 : 0,
        hasParam: this.typeInfo.typeParamsList.length > 0 ? 1 : 0,
        typeParamsList: paramsArr,
        typeSpecList: specArr,
      }).then((res) => {
        this.$message.success("修改成功");
        this.outerPop = false;
        this.getTypeList();
      });
    },
    // 添加参数
    addpardet() {
      var obj = { id: "", name: "" };
      this.typeInfo.typeParamsList.push(obj);
    },
    // 删除参数
    delpardet(index) {
      this.typeInfo.typeParamsList.splice(index, 1);
    },
    // 获取规格
    addSpec() {
      if (this.typeInfo.typeSpecList.length >= 2) {
        this.$message.error("最多可添加两条规格");
      } else {
        this.innerPop = true;
        this.$postRequest("/mall/goodsSpec/list", {
          shopId: sessionStorage.getItem("shopId"),
          name: "",
          pageNum: 1,
          pageSize: 999,
        }).then((res) => {
          this.speclist = res.rows;
          var id = this.speclist[this.chospecIndex].id;
          this.getspecValue(id);
        });
      }
    },
    // 根据规格获取规格值
    getspecValue(id) {
      this.$getRequest("/mall/goodsSpec/" + id, {}).then((res) => {
        this.specvalue = res.data.specValues;
      });
    },
    // 选择规格
    chospec(index) {
      this.chospecIndex = index;
      var id = this.speclist[index].id;
      this.checkList = [];
      this.getspecValue(id);
    },
    // 规格值确认
    specSubmit() {
      if (this.checkList.length <= 0) {
        this.$message.error("请选择规格值");
      } else {
        let isEquality = this.typeInfo.typeSpecList.some((e) => {
          return e.spec.name == this.speclist[this.chospecIndex].name;
        });

        if (isEquality) {
          this.$message.error("该规格已添加，不能重复添加");
        } else {
          var arr = [];
          this.checkList.forEach((i) => {
            var smobj = {
              id: "",
              specValText: i,
            };
            arr.push(smobj);
          });
          var obj = {
            id: "",
            specId: this.speclist[this.chospecIndex].id,
            spec: {
              name: this.speclist[this.chospecIndex].name,
              id: this.speclist[this.chospecIndex].id,
            },
            specValList: arr,
          };
          this.typeInfo.typeSpecList.push(obj);
          this.chospecIndex = 0;
          this.checkList = [];
          this.innerPop = false;
        }
      }
    },
    // 删除已选规格
    delspec(index) {
      this.typeInfo.typeSpecList.splice(index, 1);
    },
    // 清空弹框
    clearDate() {
      this.typeInfo = {
        // 弹框信息(类型详情)
        name: "", // 名称
        typeSpecList: [],
        typeParamsList: [], // 参数
      };
    },
    // 分页
    changePage(e) {
      this.page = e;
      this.getTypeList();
    },
    // 输入框搜索
    search() {
      this.page = 1;
      this.getTypeList();
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ .el-table th > .cell,
/deep/ .el-table .cell {
  text-align: center;
}
/deep/ .el-checkbox__input.is-checked .el-checkbox__inner,
/deep/ .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #0655ce;
  border-color: #0655ce;
}
/deep/ .el-input.is-disabled .el-input__inner {
  color: #606266;
  background-color: #fff;
  cursor: default;
}
.main {
  margin: 20px;
  background: #fff;
  .serbox {
    height: 60px;
    padding: 0 20px;
    align-items: center;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #eeeeee;
    .inp {
      align-items: center;
      display: flex;
      justify-content: space-between;
    }
  }
}
.table {
  border: 1px solid #eee;
  margin: 20px;
}
.page {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 40px;
  height: 60px;
}
.popOuter {
  .navBar {
    border-bottom: 1px solid #eee;
    span {
      display: inline-block;
      width: 150px;
      height: 40px;
      border: 1px solid transparent;
      text-align: center;
      line-height: 40px;
      cursor: pointer;
      transition: 0.2s;
    }
    span:hover {
      background: #f9f9f9;
      border: 1px solid #eee;
    }
    .span-act {
      background: #f9f9f9;
      border: 1px solid #eee;
    }
  }
  .cont {
    margin: 20px 0;
  }
  .cont1 {
    display: flex;
    align-items: center;
    .label {
      width: 100px;
    }
  }
  .cont2 {
    .choed {
      margin-top: 30px;
      .el {
        padding: 0 20px;
        margin-top: 10px;
        > .span {
          padding: 0 10px;
        }
        > .delspan {
          margin-left: 30px;
          color: rgb(182, 182, 182);
          cursor: pointer;
          &:hover {
            color: #0655ce;
          }
        }
      }
    }
  }
  .cont3 {
    .parambox {
      margin-top: 20px;
      display: flex;
      align-items: center;
      .del {
        padding-left: 20px;
        color: #999;
        transition: 0.2s;
        cursor: pointer;
      }
      .del:hover {
        color: #333;
      }
    }
  }
}
.speclist {
  > .name {
    cursor: pointer;
    display: inline-block;
    line-height: 40px;
    padding: 0 10px;
    &:hover {
      color: #0655ce;
    }
  }
  > .name-act {
    color: #0655ce;
  }
  .specR {
    margin-top: 30px;
    > span {
      display: inline-block;
      margin-bottom: 10px;
    }
  }
}
</style>